<template>
  <div class="tab flex flex-column">
    <div class="tab-main flex-1">
      <RouterView />
    </div>

    <!-- <div>pinia：{{count}}</div>
      <button @click="clickChange">num</button> -->
    <div class="tab-list">
      <van-tabbar route v-model="active">
        <van-tabbar-item replace to="/home" icon="wap-home">首页</van-tabbar-item>
        <van-tabbar-item replace to="/task" icon="todo-list">做单</van-tabbar-item>
        <van-tabbar-item replace to="/profile" icon="user">个人中心</van-tabbar-item>
      </van-tabbar>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
const active = ref(0)
import { changeNum } from '@/store'
import { storeToRefs } from 'pinia'
const store = changeNum()
const { count } = storeToRefs(store)
const clickChange = () => {
  let random = Math.floor(Math.random() * 10 + 1)
  store.CHANGE_NUM(random)
}
</script>
<style lang="less" scoped>
.tab {
  height: 100%;
  font-size: 0.16rem;
  .tab-main {
    overflow: auto;
  }
  .tab-list {
    height: 0.6rem;
    :deep(.van-tabbar) {
      .van-tabbar-item {
        font-family: 'PingFang SC';
        font-style: normal;
        font-weight: 600;
      }
      .van-tabbar-item--active {
        color: #628cff;
      }
    }
  }
}
</style>
